<template>
  <div class="app">
    <h1>Hello Vue</h1>
    <button @click="$destroy()">销毁我</button>
    <Count :count="count" :addCount="addCount" />
  </div>
</template>

<script>
import Count from "./components/Count.vue";
export default {
  components: { Count },
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    addCount() {
      this.count++;
    },
  },

  beforeCreate() {
    console.log("父组件------beforeCreate");
  },
  created() {
    console.log("父组件------created");
  },
  beforeMount() {
    console.log("父组件------beforeMount");
  },
  mounted() {
    console.log("父组件------mounted");
  },

  beforeUpdate() {
    console.log("父组件------beforeUpdate");
  },
  updated() {
    console.log("父组件------updated");
  },
  beforeDestroy() {
    console.log("父组件------beforeDestroy");
  },
  destroyed() {
    console.log("父组件------destroyed");
  },
};
</script>

<style scoped>
.app {
  border: 3px solid #aaa;
}
.app >>> .content {
  background-color: palevioletred;
}
</style>